<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">

<head th:replace="index::head">
</head>
<style>
    .product-img {
        width: 100%;
        height: auto;
    }

    .product-details {
        padding: 20px;
    }

    .product-info {
        padding: 10px 0;
    }
</style>

<body>
    <!-- 导航栏 -->
    <ul class="layui-nav" th:replace="index::nav">

    </ul>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs2" th:replace="index::snav">
            </div>
            <div class="layui-col-xs10">
                <div class="layui-container">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <img th:src="${p.imgUrl}" alt="商品图片" class="product-img">
                        </div>
                        <div class="layui-col-md6 product-details">
                            <h2 th:text="${p.name}"></h2>
                            <div class="product-info">
                                <strong>价格：</strong><span th:text="${p.price}"></span>
                            </div>
                            <div class="product-info">
                                <strong>描述：</strong>
                                <p th:text="${p.description}"></p>
                            </div>
                            <div class="product-info">
                                <strong>库存：</strong><span th:text="${p.stock}"></span>
                            </div>
                            <div sa:login>
                                <button class="layui-btn layui-btn-normal" sa:hasRole="user" th:onclick="'addCart('+${p.id}+')'">加入购物车</button>
                                <button class="layui-btn layui-btn-danger" sa:hasRole="user"
                                    th:onclick="'addOrder('+${p.id}+')'">立即购买</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    function addOrder(id) {
        layer.confirm('确定下单吗？', {
            btn: ['是', '取消']
        }, function () {
            $.post("/orders", { productId: id }, function (data) {
                if (data.code === 200) {
                    layer.msg('下单OK');
                    setTimeout(() => {
                        window.location.reload()
                    }, 1200);
                } else {
                    layer.msg(data.msg);
                }
            })
        }, function () {

        });
    }
    function addCart(id) {
        layer.confirm('确定加入购物车吗？', {
            btn: ['是', '取消']
        }, function () {
            $.post("/cart", { productId: id }, function (data) {
                if (data.code === 200) {
                    layer.msg('OK');
                    setTimeout(() => {
                        window.location.reload()
                    }, 1200);
                } else {
                    layer.msg(data.msg);
                }
            })
        }, function () {

        });
    }
</script>

</html>